<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div class="demo-input-size">
        <el-input
                size="medium"
                placeholder="请输入姓名"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.name"
        >
        </el-input>
        <el-input
                size="medium"
                placeholder="请输入最小年龄"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.minAge"
        >
        </el-input>
        <el-input
                size="medium"
                placeholder="请输入最大年龄"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.maxAge"
        >
        </el-input>
        <el-button icon="el-icon-search" type="success" circle @click="searchStu()"   ></el-button>
        <el-button icon="el-icon-circle-plus-outline" type="success" @click="exportInfo()"   ></el-button>
        <a href="/demo/userr/temp.xlsx">下载模板</a>
        <form id="upform">
            <input name="hehe" type="file">
        </form>
        <el-button icon="el-icon-circle-plus-outline"  @click="uploadUser()"   ></el-button>
        <el-table
                :data="stuArr"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别">
            </el-table-column>

            <el-table-column
                    prop="idcard"
                    label="身份证号">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="totalCount">
        </el-pagination>
    </div>
</div>

<script>
    var haha = new Vue({
        el:"#app",
        data:{
            searchInfo:{
                name:"",
                minAge:"",
                maxAge:""
            },
            stuArr:[],
            totalCount:0,
        },
        methods:{
            uploadUser(){
                // 1 使用js写好的 FormData类  读取表单中的信息
                var  userData = new FormData(upform);
                // 2 通过 ajax 将 data 发送给后台  $.post
                $.ajax({
                    url:"/ssm/usersource/upload",
                    type:"POST",
                    data:userData,
                    processData:false,
                    contentType:false,
                    success:function(backData){
                        haha.$message.success('修改成功');
                    }
                });            },
            exportInfo(){
        window.location.href="/demo/usersource/download?name="+haha.searchInfo.name+"&minAge="+haha.searchInfo.minAge+
                "&maxAge="+haha.searchInfo.maxAge+"&pageNo=1&pageCount=5000";
            },
            searchStu(){
                getData(1,10);
            },
            handleCurrentChange(val) {
                getData(val,10);
            }

        }
    });

    function getData( a  ,  b  ) {
        haha.searchInfo.pageNo = a;
        haha.searchInfo.pageCount = b;
        $.post("/demo/personalInfo/query",haha.searchInfo,function (backData) {
            haha.stuArr = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
        })
    }
    getData(1,10);
</script>
</body>
</html>